@font-face {
  font-family: electronicFont;
  src: url(../fonts/DS-DIGIT.TTF);
}

.flex {
  display: flex;
  height: 100%;
  flex-direction: column;
  .chart-dom {
    width: 100%;
    height: 100%;
  }
}
.data-view {
  width: 100%;
  height: 100%;
  background: #000;
}
.screen-container {
  width: 1920px;
  height: 1080px;
  background-repeat: repeat;
  background-image: url("../images/body-bg.png");
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  transform-origin: left top;
  z-index: 999;
  /*标题*/
  .title-box {
    width: 686px;
    height: 69px;
    margin: auto;
    background-image: url("../images/title-bg.png");
    background-repeat: repeat;
    background-position: center;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    line-height: 69px;

    a {
      text-decoration: none;
      color: #00e4ff;
      font-size: 26px;
      letter-spacing: 6px;
    }
  }

  /*内容*/
  .container {
    display: flex;
    width: 100%;
    height: calc(100% - 80px);

    .team-title {
      color: #1be2cd;
      font-size: 18px;
      font-weight: bold;
      line-height: 40px;
      margin-left: 20px;
    }

    .location {
      width: calc((100% - 1040px) / 2);
      margin: 0 10px;
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: space-between;
      .location-top {
        background: rgba(12, 30, 95, 0.5);
        height: 124px;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }

      .location-center {
        background: rgba(12, 30, 95, 0.5);
        //flex: 1;
        height: calc(50% - 80px);
      }

      .location-bottom {
        background: rgba(12, 30, 95, 0.5);
        height: calc(50% - 120px);
      }
    }

    /*中*/
    .center {
      width: 1000px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .air-plane {
        top: 50%;
        left: 50%;
        margin-left: -18px;
        margin-top: -12px;
        width: 36px;
      }

      .active-size {
        font-size: 18px;
        font-weight: bold;
      }

      .center-bottom {
        height: calc(50% - 120px);
      }
    }
  }

  /*左上-右上文字样式*/
  .number {
    text-align: center;
    font-size: 70px;
    font-weight: bold;
    font-family: electronicFont;
  }

  .desc {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
  }

  .team-title {
    color: #1be2cd;
    font-size: 18px;
    font-weight: bold;
    line-height: 40px;
    margin-left: 20px;
  }

  .online-list {
    .text {
      color: #dbdbdb;
      text-align: center;
    }

    .total {
      color: #39a7ff;
    }

    .success {
      color: #46f53a;
    }

    .cancel {
      color: #ffeb7b;
    }
  }

  /* div 四个角的边框*/
  .box-all {
    border: 1px solid rgba(25, 186, 139, 0.17);
    padding: 0 0.2rem 0.4rem 0.15rem;
    background: rgba(255, 255, 255, 0.04);
    background-size: 100% auto;
    position: relative;
    margin-bottom: 0.15rem;
    z-index: 10;
  }

  .box-all:before,
  .box-all:after {
    position: absolute;
    width: 1rem;
    height: 1rem;
    content: "";
    border-top: 2px solid #02a6b5;
    top: 0;
  }

  .box-all:before,
  .box-foot:before {
    border-left: 2px solid #02a6b5;
    left: 0;
  }

  .box-all:after,
  .box-foot:after {
    border-right: 2px solid #02a6b5;
    right: 0;
  }

  .box-all:before,
  .box-foot:before {
    border-left: 2px solid #02a6b5;
    left: 0;
  }

  .box-foot {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
  }

  .box-foot:before,
  .box-foot:after {
    position: absolute;
    width: 1rem;
    height: 1rem;
    content: "";
    border-bottom: 2px solid #02a6b5;
    bottom: 0;
  }

  .box-foot:before,
  .box-foot:after {
    position: absolute;
    width: 1rem;
    height: 1rem;
    content: "";
    border-bottom: 2px solid #02a6b5;
    bottom: 0;
  }

  /*
    center-top样式
  */
  .out-box {
    width: 1000px;
    height: 500px;
    margin: auto;
    background-image: url("../images/chain_bg.png");
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
  }

  .circle-effect {
    border-radius: 50%;
    border: rgba(0, 168, 255, 0.6) 1px solid;
    cursor: pointer;
    position: absolute;
  }

  .effect-position {
    position: absolute;
  }

  .across-effect-out {
    background-color: rgba(0, 126, 255, 0.05);
    border-radius: 50%;
  }

  .across-effect-in {
    background-color: rgba(0, 126, 255, 0.45);
    border-radius: 50%;
  }

  .stage-title {
    color: #00e4ff;
    font-size: 14px;
    font-weight: lighter;
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
    margin-bottom: -26px;
  }

  .main-effect-box {
    border: rgba(0, 168, 255, 0.6) 3px solid;
    border-radius: 50%;
    top: 192px;
    left: 430px;
    width: 94px;
    height: 94px;
    cursor: pointer;
  }

  .stage-position {
    position: absolute;
    bottom: 0;
    margin-top: 6px;
    margin-right: 4px;
  }

  .stage-total-title {
    margin-left: -4px;
    margin-top: -4px;
  }

  .effect-bg {
    width: 68px;
    height: 68px;
    background: #00afff;
    //margin: 9px;
    border-radius: 50%;
    opacity: 50%;
    left: 50%;
    top: 50%;
    margin-top: -34px;
    margin-left: -34px;
  }

  .special-effect-position {
    position: absolute;
    width: 88;
  }

  .team-effect {
    left: 50%;
    top: 50%;
    position: absolute;
    margin-left: -35px;
    margin-top: -35px;
    width: 70px;
  }

  .team-effect-plane {
    left: 50%;
    top: 50%;
    position: absolute;
    margin-left: -40px;
    margin-top: -40px;
    width: 80px;
  }

  .team-effect-icon {
    left: 50%;
    top: 50%;
    position: absolute;
    margin-left: -16px;
    margin-top: -10px;
    width: 32px;
  }

  /*绿色圈的旋转动画*/
  .main-effect {
    animation: scrollEffect 6.5s infinite linear;
  }

  @keyframes scrollEffect {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(90deg);
    }
    50% {
      transform: rotate(180deg);
    }
    75% {
      transform: rotate(270deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  /*绿色圈的旋转动画*/

  /*修饰卫星*/
  .round-1 {
    width: 37px;
    height: 37px;
    cursor: auto;
  }

  .round-in-1 {
    width: 33px;
    height: 33px;
    margin: 2px;
    background-color: rgba(0, 126, 255, 0.8);
  }

  .round-in-1:hover {
    background-color: rgba(0, 126, 255, 0.9);
  }

  .round-position-8 {
    top: 197px;
    right: 163px;
  }

  .round-position-9 {
    top: 99px;
    right: 93px;
  }

  .round-position-1 {
    top: 218px;
    left: 92px;
  }

  /*修饰卫星*/

  /*AirTis*/
  .tis-circle {
    width: 78px;
    height: 78px;
    cursor: pointer;
    position: absolute;
    border-radius: 50%;
    border: rgba(0, 168, 255, 0.6) 1px solid;
    background-image: url("../images/around-effect.png");
  }

  .round-position-2 {
    left: 254px;
    top: 135px;
  }

  .round-in-2 {
    width: 23px;
    height: 23px;
    margin: 2px;
    background-color: rgba(0, 126, 255, 0.8);
  }

  .round-in-2:hover {
    background-color: rgba(0, 126, 255, 0.9);
  }

  .round-position-3 {
    left: 190px;
    bottom: 89px;
  }

  .round-position-4 {
    right: 405px;
    bottom: 53px;
  }

  .round-position-5 {
    right: 243px;
    bottom: 165px;
  }

  .round-position-6 {
    right: 294px;
    top: 79px;
  }

  .round-position-7 {
    top: 218px;
    left: 92px;
  }

  .round2 {
    width: 27px;
    height: 27px;
    cursor: auto;
  }

  .round-in2 {
    width: 23px;
    height: 23px;
    margin: 2px;
    background-color: rgba(0, 126, 255, 0.7);
  }

  .round-in2:hover {
    background-color: rgba(0, 126, 255, 0.8);
  }

  @keyframes mm {
    0% {
      width: 0;
    }
    100% {
      width: 194px;
    }
  }
  @keyframes mm2 {
    0% {
      width: 0;
    }
    100% {
      width: 113px;
    }
  }
  @keyframes mm4 {
    0% {
      width: 0;
    }
    100% {
      width: 140px;
    }
  }
  @keyframes mm5 {
    0% {
      width: 0;
    }
    100% {
      width: 158px;
    }
  }
  @keyframes mm6 {
    0% {
      width: 0;
    }
    100% {
      width: 94px;
    }
  }

  .line {
    position: absolute;
    transform-origin: left;
    animation-iteration-count: infinite;
  }

  .line2 {
    z-index: 1;
    left: 330px;
    top: 183px;
    width: 0;
    height: 3px;
    transform: rotate(21deg);
    animation: mm2 4s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    background-image: url("../images/light_ef.png");
    background-repeat: no-repeat;
    background-position: 100%;
  }

  .line3 {
    z-index: 1;
    left: 262px;
    top: 351px;
    width: 0;
    height: 3px;
    transform: rotate(-25deg);
    animation: mm 5s;
    animation-delay: 4s;
    animation-iteration-count: infinite;
    background-image: url("../images/light_ef.png");
    background-repeat: no-repeat;
    background-position: 100%;
  }

  .line4 {
    z-index: 1;
    left: 638px;
    top: 141px;
    width: 0;
    height: 3px;
    transform: rotate(-211deg);
    animation: mm4 3s;
    animation-delay: 3s;
    animation-iteration-count: infinite;
    background-image: url("../images/light_ef.png");
    background-repeat: no-repeat;
    background-position: 100%;
  }

  .line5 {
    z-index: 1;
    left: 679px;
    top: 289px;
    width: 0;
    height: 3px;
    transform: rotate(-172deg);
    animation: mm5 5s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    background-image: url("../images/light_ef.png");
    background-repeat: no-repeat;
    background-position: 100%;
  }

  .line6 {
    z-index: 1;
    left: 537px;
    top: 373px;
    width: 0;
    height: 3px;
    transform: rotate(-116deg);
    animation: mm6 4s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    background-image: url("../images/light_ef.png");
    background-repeat: no-repeat;
    background-position: 100%;
  }

  /*涟漪定位*/
  .ripples-0 {
    position: absolute;
    left: 430px;
    top: 192px;
    width: 94px;
    height: 94px;
    border-radius: 94px;
    animation: ripples 1s 0.5s infinite;
  }

  .ripples-1 {
    position: absolute;
    left: 254px;
    top: 135px;
    width: 78px;
    height: 78px;
    border-radius: 78px;
    background-position: center;
    background-size: 48px 35px;
    background-repeat: no-repeat;
    animation: teamRipples 1s 0.5s infinite;
  }

  .ripples-2 {
    position: absolute;
    left: 190px;
    bottom: 89px;
    width: 78px;
    height: 78px;
    border-radius: 78px;
    background-position: center;
    background-size: 48px 35px;
    background-repeat: no-repeat;
    animation: teamRipples 1s 0.5s infinite;
  }

  .ripples-3 {
    position: absolute;
    right: 405px;
    bottom: 53px;
    width: 78px;
    height: 78px;
    border-radius: 78px;
    background-position: center;
    background-size: 48px 35px;
    background-repeat: no-repeat;
    animation: teamRipples 1s 0.5s infinite;
  }

  .ripples-4 {
    position: absolute;
    right: 243px;
    bottom: 165px;
    width: 78px;
    height: 78px;
    border-radius: 78px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 48px 35px;
    animation: teamRipples 1s 0.5s infinite;
  }

  .ripples-5 {
    position: absolute;
    right: 294px;
    top: 79px;
    width: 78px;
    height: 78px;
    border-radius: 78px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 48px 35px;
    animation: teamRipples 1s 0.5s infinite;
  }

  /*涟漪定位*/

  /*小的交付组激活时的涟漪动画*/
  @keyframes teamRipples {
    0% {
      transform: scale(1);
      opacity: 1;
      border: #087af1 solid 1px;
    }

    5% {
      transform: scale(1.1);
      opacity: 1;
      border: #087af1 solid 1px;
    }

    100% {
      transform: scale(1.2);
      opacity: 1;
      border: #087af1 solid 1px;
    }
  }
  /*小的交付组激活时的涟漪动画*/

  /*运价交付组激活时的涟漪动画*/
  @keyframes ripples {
    0% {
      transform: scale(1);
      opacity: 1;
      border: #087af1 solid 2px;
    }

    100% {
      transform: scale(1.2);
      opacity: 1;
      border: #087af1 solid 2px;
    }
  }
  /*运价交付组激活时的涟漪动画*/
}
